import React, { useState, memo, useEffect, useRef, useContext } from 'react';
import { useTween } from 'react-use';


const Ns = React.createContext()


const useCounter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
  }, [])
  return [count, setCount]
}

function Counter1() {
  let [number, setNumber] = useCounter();
  const dd = useContext(Ns);
  console.log(dd)
  return (
    <>
      <p>共享：{dd}</p>
      <Ns.Consumer>{(d) => <span>{d}</span>}</Ns.Consumer>
      <div><button onClick={() => {
        setNumber(number + 1)
      }}>{number}</button></div>
    </>
  )
}


const Hook = () => {

  const [state, setState] = useState(0)
  const [c, setSt] = useState(10)
  const sref = useRef()
  // const data = useMemo(() => ({ number }), [number]);
  // diy
  const [cb] = useCounter()

  let t = useTween();



  useEffect(() => {
    console.log(1111)
  }, [state])

  useEffect(() => {
    console.log(222, sref)
  })

  return (
    <div>
      <p>{state}</p>
      <p ref={sref}>{c}</p>
      <p>{cb}</p>
      <Ns.Provider value={c}>
        <Counter1 />
      </Ns.Provider>
      <div
        style={{
          width: 100,
          height: 100,
          borderRadius: "50px",
          background: "red",
          position: "fixed",
          top: t * 200 - 75,
          left: 200
        }}
      />

      <button onClick={() => setState((s) => s + 10)}>add</button>
      <button onClick={() => setSt((s) => s - 10)}>sub</button>

    </div>
  );
};

const Fnc = (props) => {
  console.log('up');
  return (
    <div>
      <h2>{props.a}</h2>
    </div>
  )
}

let Nef = memo(Fnc)

class Index extends React.Component {

  state = {
    a: 0
  }

  add = () => {
    this.setState({
      a: 2
    })
  }

  render() {
    return (
      <div>
        <Nef a={this.state.a} />
        <button onClick={this.add}>+</button>
      </div>
    );
  }
}


export default Hook;